<script setup lang="ts">

// $t('星期日') $t('星期一') $t('星期二') $t('星期三') $t('星期四') $t('星期五') $t('星期六')

import {
    getTimeComponentStrings,
} from '@/utils/index'

const date = ref(getTimeComponentStrings(new Date()))
const timer = setInterval(() => {
    date.value = getTimeComponentStrings(new Date())
}, 1000)

onUnmounted(() => {
    timer && clearInterval(timer)
})
</script>

<template>
    <div class="date-wrap">
        <section class="date">
            <span class="year">
                {{ date.year }} {{ $t('年') }} {{ date.month }} {{ $t('月') }} {{ date.day }} {{ $t('日') }}
            </span>
            <span class="weekday">
                {{ date.weekday }}
            </span>
            {{ date.hour }}:{{ date.minute }}
        </section>
    </div>

</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.date-wrap {
    height: 100%;
    text-align: center;

    .hour {
        color: rgba(255, 255, 255, 0.68);
        font-size: 48px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .date {
        display: flex;
        align-items: center;
        height: 100%;
        color: rgba(255, 255, 255, 0.68);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        .weekday {
            padding: 0 12px;
        }
    }
}
</style>
